﻿@model MegaBitProject.Models.Application

@{
    ViewBag.Title = "Lobby";
}
<script src="~/Scripts/Game.js"></script>
<div id="main">
    <div id="gamemsg">
        <h2>Chatroom for Tic Tac Toe</h2>
        <form id="lobbychat" method="post" action="#">
        <textarea readonly id="txtmsg"></textarea>
        <input autofocus type="text" id="message" name="message" value="" />
        </form>
    </div>
    <div id="gameList">
        <div id="currentGames">
             @Html.Action("_CurrentGames", "TicTacToe")
        </div>
    </div>
    <div id="lobbyLinks">
        <h2>Games</h2>
        <div id="underLine"></div>
        @Html.ActionLink("Create Game", "Create", "TicTacToe", null, new {@class = "newGameButton"})
        @Html.ActionLink("Random Game", "Random", "TicTacToe", null, new {@class = "newGameButton", @id = "quickGame"})
        <a href="#" onclick="showRule()" data-state="false" class="gameRulesButton">Game Rules</a>
    </div>
    <div id="activeUsers">
        <h2>Active users:</h2>
    </div>
    <div id="gameRulesPictionary" class="score">
        <ul class="gameRulesPictionary">
            <li>Game Rules</li>
            <li>Two players can play a game</li>
            <li>The game host is first to play, then the player who lost starts the second game</li>
            <li>Player 1 shall mark his cell of choice</li>
            <li>Player 2 marks his cell of choice after player 1 has marked his. Then player 1 marks his second cell, this goes on until game is over</li>
            <li>A player wins when he has marked three cells in a row, horizontally, vertically or diagonally he then gets 1 point</li>
            <li>Game ends when a player has won or when all cells have been marked and the game is a tie</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        var group = '@Model.ID';
        var hub = $.connection.chatHub;
        var you = '@User.Identity.Name';

        $('#txtmsg').append("[" + getTime() + "] " + "*** Welcome to Tic Tac Toe!");
        $('#activeUsers').append('<a href="/Account/UserProfile/' + you + '")">' + you + '</a><br />');

        hub.client.newMessage = function (userName, message) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + userName + ": " + message);
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        hub.client.userJoin = function (userName) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** " + userName + " has joined the chat!");
            $('#activeUsers').append('<a href="/Account/UserProfile/' + userName + '")">' + userName + '</a><br />');
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        $.connection.hub.start().done(function () {
            hub.server.join(group, you);
            $('#lobbychat').submit(function () {
                var message = $("#message").val();
                if (message.length > 0) {
                    hub.server.addMessage(group, you, message);
                    $('#txtmsg').append("\n" + "[" + getTime() + "] " + you + ": " + $('#message').val());
                    $('#message').val("");
                    $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                }
                return false;
            });
        });
    });
</script>